<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Resizable Div Container</title>
    <meta name="description" content="可以对div进行拖动缩放大小">
    <style type="text/css">
        html,
        body,
        #container {
            height: 100vh;
            color: #fff;
            margin: 0;
            padding: 0;
        }

        #container {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: moz-none;
            -ms-user-select: none;
            user-select: none;
            overflow: hidden
        }

        #left-area {
            height: 100vh;
            width: 50vw;
            float: left;
            overflow: hidden;
            background-color: #252526;
            display: flex;
            text-align: center;
            flex-direction: column;
            justify-content: center;
            overflow: hidden
        }

        #split-line-horizontal {
            float: left;
            cursor: w-resize;
            background-color: #252526;
            width: 3px;
            height: 100vh;
        }

        #right-area {
            height: 100vh;
            width: calc(50vw - 3px);
            float: left;
            overflow: hidden;
            background-color: #1e1e1e;
            overflow: hidden
        }

        #code-area {
            height: 50vh;
            display: flex;
            text-align: center;
            flex-direction: column;
            justify-content: center;
        }

        #split-line-vertical {
            cursor: n-resize;
            height: 2px;
            background-color: #666;
        }

        #console-area {
            height: calc(50vh - 3px);
            display: flex;
            text-align: center;
            flex-direction: column;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="left-area">
            File list
        </div>
        <div id="split-line-horizontal"></div>
        <div id="right-area">
            <div id="code-area">Code Area</div>
            <div id="split-line-vertical"></div>
            <div id="console-area">Console</div>
        </div>
    </div>
    <script src="./jquery.min.js"></script>
    <script type="text/javascript">
        let isHorizontalResizing = false
        let isVerticalResizing = false

        const splitLength = $("#split-line-horizontal").width()

        const container = $('#container');

        const leftArea = $('#left-area');
        const rightArea = $('#right-area');
        const splitLineHorizontal = $('#split-line-horizontal');

        const codeArea = $('#code-area');
        const consoleArea = $('#console-area');
        const splitLineVertical = $('#split-line-vertical');

        splitLineHorizontal.on('mousedown', function (e) {
            isHorizontalResizing = true;
        });

        splitLineVertical.on('mousedown', function (e) {
            isVerticalResizing = true;
        })

        $(document).on('mousemove', function (e) {
            if (isHorizontalResizing) {
                let horizontalMove = container.width() - e.clientX;
                if (horizontalMove < splitLength) {
                    horizontalMove = splitLength
                } else if (horizontalMove > container.width() - splitLength) {
                    horizontalMove = container.width() - splitLength
                }
                leftArea.width(container.width() - horizontalMove - splitLength);
                // split-line-horizontal.css('right', horizontalMove);
                rightArea.width(horizontalMove);
            } else if (isVerticalResizing) {
                let verticalMove = rightArea.height() - e.clientY;
                if (verticalMove < splitLength) {
                    verticalMove = splitLength
                } else if (verticalMove > rightArea.height() - splitLength) {
                    verticalMove = rightArea.height() - splitLength
                }
                codeArea.height(rightArea.height() - verticalMove - splitLength);
                // split-line-horizontal.css('right', verticalMove);
                consoleArea.height(verticalMove);
            }

        }).on('mouseup', function (e) {
            isHorizontalResizing = false;
            isVerticalResizing = false;
        });
    </script>
</body>

</html>